<template>
  <el-form ref="registerForm" :model="userInfo" :rules="rules" status-icon label-width="0px"
    :hide-required-asterisk="true" size="large" label-position="left">
    <el-form-item label="" prop="username" size="large">
      <el-input v-model="userInfo.username" autocomplete="off" placeholder="请输入用户名">
        <template #prepend><el-icon>
            <User />
          </el-icon></template>
      </el-input>
    </el-form-item>
    <el-form-item label="" prop="password" size="large">
      <el-input v-model="userInfo.password" type="password" autocomplete="off" show-password placeholder="请输入密码">
        <template #prepend><el-icon>
            <Lock />
          </el-icon></template>
      </el-input>
    </el-form-item>
    <el-form-item label="" prop="passwordConfirm" size="large">
      <el-input v-model="userInfo.passwordConfirm" type="password" autocomplete="off" show-password placeholder="请再次输入密码">
        <template #prepend><el-icon>
            <Lock />
          </el-icon></template>
      </el-input>
    </el-form-item>
    <div class="w-full flex justify-center items-center p-0 my-5">
      <el-button class="w-full  text-center" type="warning" @click="registerHandle(registerForm)"
        :loading="registerLoading" auto-insert-space>注册并登录</el-button>
    </div>
  </el-form>
</template>

<script  setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useUsersStore } from '@/store/modules/user'
import { User, Lock, Iphone } from '@element-plus/icons-vue'
const registerForm = ref()
const { register } = useUsersStore()
const userInfo = reactive({
  password: '',
  passwordConfirm: '',
  username: '',
  // phoneNumber: '',
  // code: ''
})
const pwd_validator = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (userInfo.passwordConfirm !== '') {
      if (!registerForm.value) return
      registerForm.value.validateField('passwordConfirm', () => null)
    }
    callback()
  }
}
const pwd_confirm_validator = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== userInfo.password) {
    callback(new Error("两次密码不一致"))
  } else {
    callback()
  }
}
const rules = reactive({
  password: [{ trigger: 'blur', validator: pwd_validator }],
  passwordConfirm: [{ validator: pwd_confirm_validator, trigger: 'blur' }],
  username: [{ trigger: 'blur', required: true, message: '请输入用户名', min: 1, max: 20 }],
})
const registerLoading = ref(false)
const registerHandle = async (formEl) => {
  registerLoading.value = true
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      try {
        await register(userInfo)
      } catch (error) {
        ElMessage({
          message: error.msg,
          type: 'error'
        })
        registerLoading.value = false
      }
    } else {
      registerLoading.value = false
      return false
    }
  })
}
</script>